<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <div class="panel" ref="propertiesPanel"></div>
  </div>
</template>

<script>
import { xmlStr } from "@/data.js";
import BpmnModeler from "bpmn-js/lib/Modeler";

// 属性栏
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from "bpmn-js-properties-panel";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";

export default {
  name: "BpmnBasic",
  components: {},
  create() {},
  mounted() {
    this.init();
  },
  data() {
    return {
      bpmnModeler: null, // Bpmn 建模器
      container: null,
      canvas: null, // bpmn 画布
    };
  },
  methods: {
    init() {
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas;
      const propertiesPanel = this.$refs.propertiesPanel
      // 建模
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        propertiesPanel: {
          parent: propertiesPanel,
        },
        additionalModules: [
          // 右边的属性栏
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule,
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor,
        },
      });
      this.createNewDiagram();
    },
    async createNewDiagram() {
      try {
        let { warnings } = await this.bpmnModeler.importXML(xmlStr);
        if (warnings && warnings.length) {
          warnings.forEach((warn) => console.warn(warn));
        }
      } catch (e) {
        console.error(`[Process Designer Warn]: ${e?.message || e}`);
      }
    },
    success() {
      console.log("创建成功");
    },
  },
};
</script>

<style lang="scss" scoped>
.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
</style>
